import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        // 滚动组件：
        body:
            // 1.ListView组件基本使用
            //  ListView(
            //   // 默认垂直滚动
            //   scrollDirection: Axis.horizontal,
            //   children: [
            //     Container(
            //       width: 300,
            //       height: 300,
            //       color: Colors.red,
            //     ),
            //     Container(
            //       width: 300,
            //       height: 300,
            //       color: Colors.orange,
            //     ),
            //     Container(
            //       width: 300,
            //       height: 300,
            //       color: Colors.yellow,
            //     ),
            //     Container(
            //       width: 300,
            //       height: 300,
            //       color: Colors.green,
            //     ),
            //     Container(
            //       width: 300,
            //       height: 300,
            //       color: Colors.blue,
            //     ),
            //     Container(
            //       width: 300,
            //       height: 300,
            //       color: Colors.purple,
            //     )
            //   ],
            // )
            // 2.ListView构造函数使用
            // CustomListView(),
            // 3.GridView使用
            // CustomGridView(),
            // 4.CustomScrollView使用
            CustomCustomScrollView(),
      ),
    ),
  );
}

// 1.自定义ListView
class CustomListView extends StatelessWidget {
  const CustomListView({super.key});
  @override
  Widget build(BuildContext context) {
    // 使用起来类似forEach，前提是必须在自定义组件中使用
    // ListView.separated带分割线
    // ListView.builder不带分割线
    return ListView.separated(
      itemBuilder: (context, index) {
        return Container(
          width: 300,
          height: 300,
          color: Color.fromRGBO(
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextDouble(),
          ),
          child: Text('我是第$index个List'),
        );
      },
      // 每一条分割线
      separatorBuilder: (context, index) {
        return Container(width: 10, height: 10, color: Colors.red);
      },
      itemCount: 10,
    );
  }
}

// 2.自定义GridView
class CustomGridView extends StatelessWidget {
  const CustomGridView({super.key});

  @override
  Widget build(BuildContext context) {
    return
    // 1.使用构造函数
    // GridView(
    //   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    //     // 一行几个？
    //     crossAxisCount: 3,
    //     // 行间距
    //     mainAxisSpacing:10 ,
    //     // 列间距
    //     crossAxisSpacing: 10,
    //     // 子组件大小的比例
    //     childAspectRatio:9/16
    //   ),
    //   children: [
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第1个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第2个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第3个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     ),
    //     Container(
    //       width: 300,
    //       height: 300,
    //       color: Color.fromRGBO(
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextInt(256),
    //         Random().nextDouble(),
    //       ),
    //       child: Text('我是第4个List'),
    //     )
    //   ],
    // );
    // 2.使用builder进行生成
    GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
      itemBuilder: (context, index) {
        return Container(
          width: 300,
          height: 300,
          color: Color.fromRGBO(
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextDouble(),
          ),
          child: Text('我是第$index个List'),
        );
      },
      itemCount: 20,
    );
  }
}

// 3.自定义CustomScrollView
class CustomCustomScrollView extends StatelessWidget {
  const CustomCustomScrollView({super.key});
  @override
  Widget build(BuildContext context) {
    // 复杂的滚动容器组件
    return CustomScrollView(
      // 子组件的结合
      slivers: [
        // 网格
        SliverGrid.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          itemBuilder: (context, index) {
            return Container(
              width: 300,
              height: 300,
              color: Color.fromRGBO(
                Random().nextInt(256),
                Random().nextInt(256),
                Random().nextInt(256),
                Random().nextDouble(),
              ),
              child: Text('我是第$index个grid'),
            );
          },
          itemCount: 6,
        ),
        SliverPadding(padding: EdgeInsets.all(20)),
        // 列表
        SliverList.builder(
          itemBuilder: (context, index) {
            return Container(
              width: 300,
              height: 300,
              color: Color.fromRGBO(
                Random().nextInt(256),
                Random().nextInt(256),
                Random().nextInt(256),
                Random().nextDouble(),
              ),
              child: Text('我是第$index个list'),
            );
          },
          itemCount: 10,
        ),
        // 如果只有一个其他的组件，使用SliverGrid或者SliverList包裹一下就可以了
        SliverGrid.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
          ),
          itemBuilder: (context, index) {
            return Container(
              width: 300,
              height: 300,
              color: Color.fromRGBO(
                Random().nextInt(256),
                Random().nextInt(256),
                Random().nextInt(256),
                Random().nextDouble(),
              ),
              child: Text('我是单独的container'),
            );
          },
          // 如果不给个数会无限生成
          itemCount: 1,
        ),
      ],
    );
  }
}

//fstfu快速生成有状态组件 
// class Main extends StatefulWidget {
//   const Main({ Key? key }) : super(key: key);

//   @override
//   _MainState createState() => _MainState();
// }

// class _MainState extends State<Main> {
//   @override
//   Widget build(BuildContext context) {
//     return Container(
      
//     );
//   }
// }

// fstless 快速生成无状态组件
// class Main extends StatelessWidget {
// const Main({ Key? key }) : super(key: key);

//   @override
//   Widget build(BuildContext context){
//     return Container();
//   }
// }